<template>
	<view class="newsDetailPage">
		<view class="title">{{ title }}</view>
		<view class="metaInfo">
			<text class="author">{{ author }}</text>
			<text class="time">{{ time }}</text>
		</view>
		<view class="contentContainer">
			<block v-for="(block, index) in contentBlocks" :key="index">
				<view v-if="block.type === 'text'" class="textContent">
					<text>{{ block.text }}</text>
				</view>
				<view v-if="block.type === 'image'" class="imageBlock">
					<image :src="block.src" mode="aspectFill" class="detailImage"></image>
					<text v-if="block.desc" class="imageDesc">{{ block.desc }}</text>
				</view>
				<view v-if="block.type === 'imageStack'" class="imageStackBlock">
					<view class="imageStack">
						<image v-for="(img, i) in block.srcs" :key="i" :src="img" mode="aspectFill" class="stackImage">
						</image>
					</view>
					<text v-if="block.desc" class="imageDesc">{{ block.desc }}</text>
				</view>
			</block>
		</view>


		<view class="commentsBox">
			<text class="commentsText">评论 {{ comments }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'NewsDetView',
		props: {
			title: {
				type: String,
				default: '标题'
			},
			author: {
				type: String,
				default: '作者'
			},
			time: {
				type: String,
				default: '2025-01-01'
			},
			comments: {
				type: Number,
				default: 0
			},
			contentBlocks: {
				type: Array,
				default () {
					return [];
				}
			}
		}
	};
</script>

<style scoped>
	.newsDetailPage {
		padding: 30rpx;
		font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
		background-color: #ffffff;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #1a1a1a;
		line-height: 1.5;
		margin-bottom: 20rpx;
	}

	.metaInfo {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 30rpx;
	}

	.metaInfo .author {
		margin-right: 20rpx;
		font-weight: bold;
	}

	.metaInfo .time {
		color: #888;
	}

	.contentContainer {
		line-height: 1.8;
		color: #333;
		font-size: 32rpx;
	}

	.textContent {
		margin-bottom: 20rpx;
		text-align: justify;
	}

	.imageBlock {
		margin: 30rpx 0;
	}

	.detailImage {
		width: 100%;
		height: 400rpx;
		border-radius: 12rpx;
		object-fit: cover;
	}


	.imageStackBlock {
		margin: 30rpx 0;
	}

	.imageStack {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.stackImage {
		width: 100%;
		height: 400rpx;
		border-radius: 12rpx;
		object-fit: cover;
	}


	.imageDesc {
		display: block;
		text-align: center;
		font-size: 26rpx;
		color: #888;
		margin-top: 10rpx;
	}

	.commentsBox {
		margin-top: 40rpx;
		padding: 20rpx 0;
		border-top: 1px solid #eee;
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}
</style>